<template>
  <div ref="pieRef"></div>
</template>
<script setup lang="tsx">
import * as echarts from 'echarts';
import { ref, onMounted, watch, reactive } from 'vue';
const pieRef = ref<HTMLElement>();
const props = defineProps({
  allCount: {
    type: Number,
    default: 0,
  },
  number: {
    type: Number,
    default: 0,
  },
  percent: {
    type: Number,
    default: 0,
  },
});
watch(props, (nval) => {
  option.graphic[0].style.text = props.percent + '%';
  option.series[0].data = [
    {
      name: '已使用',
      value: props.number,
    },
    {
      name: '未使用',
      value: props.allCount - props.number,
    },
  ];
  chart.value?.setOption(option);
});
const chart = ref<echarts.ECharts>();
onMounted(() => {
  chart.value = echarts.init(pieRef.value!);
  chart.value.setOption(option);
});
const option = reactive({
  tooltip: {
    trigger: 'item',
    formatter: '{b}:{c}',
    backgroundColor: 'rgba(0,0,0,0.3)',
    borderWidth: 0,
    color: '#FFF',
    fontSize: 10,
    padding: 5,
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      left: 0,
      radius: ['60%', '87%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        // radius: ['58%', '72%'],
        scaleSize: 5,
      },
      itemStyle: {
        color: (params) => {
          let color = [
            '#00aeff',
            '#cfcfcf',
            '#fec50f',
            '#32ff40',
            '#0179fe',
            '#f1d6a9',
            '#f8e71c',
            '#bfb8c5',
            '#1373f2',
            '#8B41E6',
            '#E261E9',
            '#66AC10',
            '#891F32',
            '#B0BF3F',
          ];
          return color[params.dataIndex];
        },
      },
      // data: [props.number, props.allCount - props.number]
      data: [
        {
          name: '已接入',
          value: props.number,
        },
        {
          name: '未接入',
          value: props.allCount - props.number,
        },
      ],
    },
  ],
  graphic: [
    {
      type: 'text', //通过不同top值可以设置上下显示
      left: 'center',
      top: 'center',
      style: {
        text: props.percent + '%',
        textAlign: 'center',
        fill: '#1f59f7', //文字的颜色
        width: 30,
        height: 30,
        fontSize: 18,
        fontWeight: 'bold',
      },
    },
  ],
});
</script>
<style lang="less" scoped></style>
